import axios from '../lib/axios.js';
import qs from '../lib/qs.js';
import md5 from '../lib/spark-md5.js';

console.log(axios, qs, md5);

//#region md5加密演示部分
let txtMd5 = document.getElementById('txtMd5');
let btnMd5 = document.getElementById('btnMd5');
let spMd5 = document.getElementById('spMd5');

btnMd5.addEventListener('click', () => {
  spMd5.innerHTML = md5.hash(txtMd5.value);
});

//#endregion

//#region  qs库演示
// qs全称是查询字符串的意思，是html传输数据的标准格式
// 名称1=值1&名称2=值2...
// json格式{名称1:值1}
// qs库就是做这两个的转换功能
let user = {
  name: '芙宁娜',
  password: 'abcd 1234',
};
//stringify就是将json转查询查询字符串
let qsuser = qs.stringify(user);
console.log('qs转json', user, qsuser);

let strQs = 'abd=1234def=hhf';
//parse就是将查询字符串转json
let jsonQs = qs.parse(strQs);
console.log('qs转json', strQs, jsonQs);

//#endregion

//#region  axios网络请求演示
//请求后端api的几个要素
//1:请求的服务网站
//2:请求的api的路径
//3:请求的参数数据
//4：请求的方式
//5:服务器的应答结果

let serverUrl = 'https://service.huhuiyu.top';

let txtEcho = document.getElementById('txtEcho');
let btnEcho = document.getElementById('btnEcho');
let divEcho = document.getElementById('divEcho');

btnEcho.addEventListener('click', () => {
  let promise = axios({
    url: serverUrl + '/?echo=' + txtEcho.value,
    method: 'get',
  });

  promise
    .then((resp) => {
      //data:数据,data:日期，约会
      console.log('请求的结果:', resp.data);
      divEcho.innerHTML = JSON.stringify(resp.data);
    })
    .catch((err) => {
      console.error('请求发生错误:', err);
    });
});

//获取ip地址
axios({
  url: serverUrl + '/ip',
  method: 'GET',
  data: '',
})
  .then((resp) => {
    alert(JSON.stringify(resp.data));
  })
  .catch((err) => {
    console.error(err);
  }); 

//#endregion
